<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="归属栏目" prop="column">
        <el-select v-model="ruleForm.column" placeholder="请选择归属栏目">
          <el-option label="栏目一" value="栏目一"></el-option>
          <el-option label="栏目二" value="栏目二"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-col :span="12" :offset="0">
          <el-input v-model="ruleForm.title"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="关键字" prop="keyword">
        <el-col :span="12" :offset="0">
          <el-input v-model="ruleForm.keyword"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-col :span="2" :offset="0">
          <el-input v-model="ruleForm.weight"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="摘要" prop="summary">
        <el-col :span="12" :offset="0">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2 }"
            v-model="ruleForm.summary"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="缩略图" prop="thumbnail">
        <el-upload
          action="http://localhost:1000/upload"
          name="upload"
          :disabled="uploadFlag"
          :limit="1"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="正文" prop="document">
        <MyCkEditorVue
          ref="myCkEditor"
          :value="ruleForm.document"
          @editorChange="editorChange"
        ></MyCkEditorVue>
      </el-form-item>
      <el-form-item label="来源" prop="source">
        <el-col :span="12" :offset="0">
          <el-input v-model="ruleForm.source" placeholder="请输入文章来源"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="相关文章" prop="relation">
        <el-select v-model="ruleForm.relation" placeholder="请选择相关文章">
          <el-option label="文章一" value="文章一"></el-option>
          <el-option label="文章二" value="文章二"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="允许评论" prop="comment">
        <el-radio-group v-model="ruleForm.comment">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="推荐位" prop="recommend">
        <el-checkbox-group v-model="ruleForm.recommend">
          <el-checkbox label="首页" name="type"></el-checkbox>
          <el-checkbox label="栏目页" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发布时间" prop="times">
        <el-date-picker
          v-model="ruleForm.times"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发布状态" prop="state">
        <el-radio-group v-model="ruleForm.state">
          <el-radio label="发布"></el-radio>
          <el-radio label="审核"></el-radio>
          <el-radio label="删除"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自定义内容视图" prop="view">
        <el-select v-model="ruleForm.view" placeholder="请选择内容视图">
          <el-option label="默认视图" value="默认视图"></el-option>
          <el-option label="视图1" value="视图1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自定义视图参数" prop="viewParams">
        <el-col :span="12" :offset="0">
          <el-input v-model="ruleForm.viewParams" placeholder="请输入视图参数" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="createFlag">立即创建</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="preview">预览</el-button>
      </el-form-item>
    </el-form>
    <el-drawer :visible.sync="previewFlag" :modal="false" size="70%">
      <h2 class="preview-title">{{ ruleForm.title }}</h2>
      <el-divider></el-divider>
      <el-col :span="20" :offset="2" class="ck-content" v-html="ruleForm.document"></el-col>
      <el-col :span="20" :offset="2">发布时间：{{ ruleForm.times }}</el-col>
    </el-drawer>
  </div>
</template>
<script>
  import MyCkEditorVue from '@/components/MyEditor'
  export default {
    components: {
      MyCkEditorVue
    },
    data() {
      return {
        ruleForm: {
          column: '',
          title: '',
          keyword: '',
          weight: 0,
          summary: '',
          thumbnail: '',
          document: '',
          source: '',
          relation: '',
          comment: '是',
          recommend: [],
          times: '',
          state: '',
          view: '',
          viewParams: ''
        },
        rules: {
          column: [{ required: true, message: '请选择归属栏目', trigger: 'change' }],
          title: [{ required: true, message: '请输入文章标题名称', trigger: 'blur' }],
          times: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
          recommend: [{ required: true, message: '请选择推荐位', trigger: 'change' }],
          state: [{ required: true, message: '请选择发布状态', trigger: 'change' }]
        },
        uploadFlag: false,
        previewFlag: false,
        createFlag: false
      }
    },
    methods: {
      submitForm() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.createFlag = true
            setTimeout(() => {
              this.createFlag = false
              this.$message({
                message: '恭喜你，创建成功',
                type: 'success'
              })
            }, 500)
          }
        })
      },
      editorChange(data) {
        this.ruleForm.document = data
      },
      resetForm() {
        this.$refs.ruleForm.resetFields()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(response, file, fileList) {
        console.log(response, file, fileList)
        this.uploadFlag = true
      },
      preview() {
        console.log('preview')
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log(this.ruleForm)
            this.previewFlag = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .preview-title {
    text-align: center;
  }
  /deep/ .el-drawer__body {
    padding: 20px;
  }
</style>
